<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站手机端充值页面集合</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #165DFF;
      --secondary: #6c757d;
      --light: #f8f9fa;
      --dark: #343a40;
      --white: #ffffff;
      --border: #eee;
      --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      
      /* 不同风格主题色 */
      --style1: #165DFF; /* 经典蓝 */
      --style2: #E63946; /* 活力红 */
      --style3: #8338EC; /* 优雅紫 */
      --style4: #1D3557; /* 商务蓝 */
      --style5: #FF9F1C; /* 活力橙 */
      --style6: #0077B6; /* 科技蓝 */
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    
    /* 主页面容器 */
    .recharge-page {
      display: none;
      min-height: 100vh;
      padding-bottom: 80px;
    }
    
    .recharge-page.active {
      display: block;
      animation: fadeIn 0.3s ease forwards;
    }
    
    /* 顶部导航栏 */
    .page-header {
      padding: 20px;
      position: relative;
      text-align: center;
      border-bottom: 1px solid var(--border);
    }
    
    .page-title {
      font-size: 20px;
      font-weight: 600;
      margin: 0;
    }
    
    .header-back {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: var(--dark);
      font-size: 20px;
      cursor: pointer;
    }
    
    /* 余额信息 */
    .balance-info {
      padding: 25px 20px;
      text-align: center;
    }
    
    .balance-label {
      font-size: 14px;
      color: var(--secondary);
      margin-bottom: 8px;
    }
    
    .balance-amount {
      font-size: 32px;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 10px;
    }
    
    .balance-desc {
      font-size: 13px;
      color: var(--secondary);
    }
    
    /* 金额选择 */
    .amount-section {
      padding: 0 20px 20px;
    }
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 15px;
      color: var(--dark);
    }
    
    .amount-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      margin-bottom: 20px;
    }
    
    .amount-item {
      padding: 18px 10px;
      border-radius: 12px;
      border: 1px solid var(--border);
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
    }
    
    .amount-item.selected {
      border-color: var(--primary);
      background-color: rgba(22, 93, 255, 0.05);
    }
    
    .amount-value {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .amount-desc {
      font-size: 12px;
      color: var(--secondary);
    }
    
    .custom-amount {
      width: 100%;
      padding: 15px;
      border-radius: 12px;
      border: 1px solid var(--border);
      font-size: 16px;
      text-align: center;
      margin-bottom: 20px;
    }
    
    /* 支付方式 */
    .payment-methods {
      padding: 0 20px 20px;
    }
    
    .method-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .method-item {
      padding: 15px;
      border-radius: 12px;
      border: 1px solid var(--border);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .method-item.selected {
      border-color: var(--primary);
      background-color: rgba(22, 93, 255, 0.05);
    }
    
    .method-info {
      display: flex;
      align-items: center;
    }
    
    .method-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background-color: var(--light);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      font-size: 20px;
    }
    
    .method-name {
      font-size: 16px;
      font-weight: 500;
    }
    
    .method-check {
      color: var(--primary);
      font-size: 20px;
      opacity: 0;
    }
    
    .method-item.selected .method-check {
      opacity: 1;
    }
    
    /* 优惠信息 */
    .discount-section {
      padding: 0 20px 20px;
    }
    
    .discount-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .discount-item {
      padding: 15px;
      border-radius: 12px;
      border: 1px dashed #FFD700;
      background-color: rgba(255, 215, 0, 0.05);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
    }
    
    .discount-info {
      display: flex;
      align-items: center;
    }
    
    .discount-tag {
      background-color: #FFD700;
      color: #8B4513;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 600;
      margin-right: 10px;
    }
    
    .discount-desc {
      font-size: 14px;
    }
    
    /* 充值按钮 */
    .recharge-btn {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      max-width: 420px;
      padding: 15px 20px;
      background-color: var(--white);
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }
    
    .total-amount {
      text-align: right;
    }
    
    .total-label {
      font-size: 14px;
      color: var(--secondary);
    }
    
    .total-value {
      font-size: 18px;
      font-weight: 700;
      color: var(--primary);
    }
    
    .confirm-btn {
      padding: 12px 30px;
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .confirm-btn:hover {
      opacity: 0.9;
      transform: translateY(-2px);
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1010;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 风格1：经典蓝 - 简洁布局 */
    .style-1 {
      --primary: var(--style1);
    }
    
    .style-1 .amount-item.selected::after {
      content: '';
      position: absolute;
      top: 8px;
      right: 8px;
      width: 16px;
      height: 16px;
      background-color: var(--primary);
      border-radius: 50%;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
    }
    
    /* 风格2：活力红 - 卡片式布局 */
    .style-2 {
      --primary: var(--style2);
    }
    
    .style-2 .amount-item {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      border: none;
    }
    
    .style-2 .amount-item.selected {
      box-shadow: 0 4px 12px rgba(230, 57, 70, 0.15);
    }
    
    .style-2 .method-item {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      border: none;
    }
    
    .style-2 .discount-item {
      background: linear-gradient(135deg, rgba(255, 228, 225, 0.5), rgba(255, 182, 193, 0.3));
    }
    
    /* 风格3：优雅紫 - 渐变风格 */
    .style-3 {
      --primary: var(--style3);
    }
    
    .style-3 .page-header {
      background: linear-gradient(135deg, #8338EC, #5E60CE);
      color: white;
      border-bottom: none;
    }
    
    .style-3 .header-back {
      color: white;
    }
    
    .style-3 .confirm-btn {
      background: linear-gradient(135deg, #8338EC, #5E60CE);
    }
    
    .style-3 .amount-item.selected {
      background: linear-gradient(135deg, rgba(131, 56, 236, 0.1), rgba(94, 96, 206, 0.1));
    }
    
    /* 风格4：商务蓝 - 简约商务 */
    .style-4 {
      --primary: var(--style4);
    }
    
    .style-4 .amount-item {
      border-radius: 6px;
    }
    
    .style-4 .method-item {
      border-radius: 6px;
    }
    
    .style-4 .confirm-btn {
      border-radius: 6px;
      background-color: var(--primary);
    }
    
    .style-4 .discount-section {
      background-color: #F8FAFC;
      padding: 15px 20px;
      margin: 0 -20px 20px;
    }
    
    /* 风格5：活力橙 - 突出优惠 */
    .style-5 {
      --primary: var(--style5);
    }
    
    .style-5 .amount-item {
      position: relative;
      overflow: hidden;
    }
    
    .style-5 .amount-item.hot::before {
      content: '热门';
      position: absolute;
      top: 0;
      right: 0;
      background-color: #E63946;
      color: white;
      font-size: 10px;
      padding: 2px 8px;
    }
    
    .style-5 .discount-section {
      border-top: 2px solid #FFD700;
      margin-top: 10px;
      padding-top: 15px;
    }
    
    .style-5 .discount-item {
      border-color: #FF9F1C;
      background-color: rgba(255, 159, 28, 0.05);
    }
    
    /* 风格6：科技蓝 - 未来感 */
    .style-6 {
      --primary: var(--style6);
    }
    
    .style-6 .container {
      background-color: #F0F7FF;
    }
    
    .style-6 .amount-item {
      background-color: white;
      border: 1px solid #CCE0FF;
    }
    
    .style-6 .method-item {
      background-color: white;
      border: 1px solid #CCE0FF;
    }
    
    .style-6 .recharge-btn {
      background-color: #F0F7FF;
      border-top: 1px solid #CCE0FF;
    }
    
    .style-6 .balance-info {
      background-color: white;
      margin: 0 -20px 20px;
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    /* 响应式调整 */
    @media (max-width: 360px) {
      .amount-value {
        font-size: 16px;
      }
      
      .confirm-btn {
        padding: 10px 20px;
        font-size: 15px;
      }
    }
  </style>
</head>
<body class="style-1">
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">选择充值页面样式</div>
    <div class="switcher-option active" data-style="1">经典蓝</div>
    <div class="switcher-option" data-style="2">活力红</div>
    <div class="switcher-option" data-style="3">优雅紫</div>
    <div class="switcher-option" data-style="4">商务蓝</div>
    <div class="switcher-option" data-style="5">活力橙</div>
    <div class="switcher-option" data-style="6">科技蓝</div>
  </div>
  
  <div class="container">
    <!-- 风格1：经典蓝 - 简洁布局 -->
    <div class="recharge-page active" id="page1">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">账户充值</h1>
      </div>
      
      <div class="balance-info">
        <div class="balance-label">当前余额</div>
        <div class="balance-amount">¥128.00</div>
        <div class="balance-desc">充值金额将实时到账</div>
      </div>
      
      <div class="amount-section">
        <div class="section-title">选择充值金额</div>
        <div class="amount-grid">
          <div class="amount-item">
            <div class="amount-value">¥10</div>
            <div class="amount-desc">普通会员</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥30</div>
            <div class="amount-desc">白银会员</div>
          </div>
          <div class="amount-item selected">
            <div class="amount-value">¥50</div>
            <div class="amount-desc">黄金会员</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥100</div>
            <div class="amount-desc">铂金会员</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥200</div>
            <div class="amount-desc">钻石会员</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥500</div>
            <div class="amount-desc">至尊会员</div>
          </div>
        </div>
        
        <input type="text" class="custom-amount" placeholder="其他金额">
      </div>
      
      <div class="payment-methods">
        <div class="section-title">选择支付方式</div>
        <ul class="method-list">
          <li class="method-item selected">
            <div class="method-info">
              <div class="method-icon"><i class="fa fa-credit-card"></i></div>
              <div class="method-name">微信支付</div>
            </div>
            <div class="method-check"><i class="fa fa-check"></i></div>
          </li>
          <li class="method-item">
            <div class="method-info">
              <div class="method-icon"><i class="fa fa-paypal"></i></div>
              <div class="method-name">支付宝</div>
            </div>
            <div class="method-check"><i class="fa fa-check"></i></div>
          </li>
          <li class="method-item">
            <div class="method-info">
              <div class="method-icon"><i class="fa fa-university"></i></div>
              <div class="method-name">银行卡支付</div>
            </div>
            <div class="method-check"><i class="fa fa-check"></i></div>
          </li>
        </ul>
      </div>
      
      <div class="discount-section">
        <div class="section-title">选择优惠</div>
        <ul class="discount-list">
          <li class="discount-item">
            <div class="discount-info">
              <div class="discount-tag">满减</div>
              <div class="discount-desc">满100减10，适用于100元以上充值</div>
            </div>
            <div class="method-check"><i class="fa fa-angle-right"></i></div>
          </li>
          <li class="discount-item">
            <div class="discount-info">
              <div class="discount-tag">折扣</div>
              <div class="discount-desc">会员专享9折，所有金额通用</div>
            </div>
            <div class="method-check"><i class="fa fa-angle-right"></i></div>
          </li>
        </ul>
      </div>
      
      <div class="recharge-btn">
        <div class="total-amount">
          <div class="total-label">实付金额</div>
          <div class="total-value">¥50.00</div>
        </div>
        <button class="confirm-btn">确认充值</button>
      </div>
    </div>
    
    <!-- 风格2：活力红 - 卡片式布局 -->
    <div class="recharge-page" id="page2">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">充值中心</h1>
      </div>
      
      <div class="balance-info">
        <div class="balance-label">账户余额</div>
        <div class="balance-amount">¥36.50</div>
        <div class="balance-desc">充值越多，优惠越多</div>
      </div>
      
      <div class="amount-section">
        <div class="section-title">充值金额</div>
        <div class="amount-grid">
          <div class="amount-item">
            <div class="amount-value">¥10</div>
            <div class="amount-desc">送20积分</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥20</div>
            <div class="amount-desc">送50积分</div>
          </div>
          <div class="amount-item selected">
            <div class="amount-value">¥50</div>
            <div class="amount-desc">送150积分</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥100</div>
            <div class="amount-desc">送350积分</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥200</div>
            <div class="amount-desc">送800积分</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥500</div>
            <div class="amount-desc">送2200积分</div>
          </div>
        </div>
        
        <input type="text" class="custom-amount" placeholder="输入其他金额">
      </div>
      
      <div class="payment-methods">
        <div class="section-title">支付方式</div>
        <ul class="method-list">
          <li class="method-item selected">
            <div class="method-info">
              <div class="method-icon"><i class="fa fa-credit-card"></i></div>
              <div class="method-name">微信支付</div>
            </div>
            <div class="method-check"><i class="fa fa-check-circle"></i></div>
          </li>
          <li class="method-item">
            <div class="method-info">
              <div class="method-icon"><i class="fa fa-paypal"></i></div>
              <div class="method-name">支付宝</div>
            </div>
            <div class="method-check"><i class="fa fa-check-circle"></i></div>
          </li>
          <li class="method-item">
            <div class="method-info">
              <div class="method-icon"><i class="fa fa-apple"></i></div>
              <div class="method-name">Apple Pay</div>
            </div>
            <div class="method-check"><i class="fa fa-check-circle"></i></div>
          </li>
        </ul>
      </div>
      
      <div class="discount-section">
        <div class="section-title">可用优惠券</div>
        <ul class="discount-list">
          <li class="discount-item">
            <div class="discount-info">
              <div class="discount-tag">5元券</div>
              <div class="discount-desc">满50可用，有效期至2023-12-31</div>
            </div>
            <div class="method-check"><i class="fa fa-plus"></i></div>
          </li>
        </ul>
      </div>
      
      <div class="recharge-btn">
        <div class="total-amount">
          <div class="total-label">应付金额</div>
          <div class="total-value">¥50.00</div>
        </div>
        <button class="confirm-btn">立即支付</button>
      </div>
    </div>
    
    <!-- 风格3：优雅紫 - 渐变风格 -->
    <div class="recharge-page" id="page3">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">会员充值</h1>
      </div>
      
      <div class="balance-info">
        <div class="balance-label">当前余额</div>
        <div class="balance-amount">¥0.00</div>
        <div class="balance-desc">充值后可解锁更多高级功能</div>
      </div>
      
      <div class="amount-section">
        <div class="section-title">会员套餐</div>
        <div class="amount-grid">
          <div class="amount-item">
            <div class="amount-value">¥18</div>
            <div class="amount-desc">月度会员</div>
          </div>
          <div class="amount-item selected">
            <div class="amount-value">¥48</div>
            <div class="amount-desc">季度会员</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥158</div>
            <div class="amount-desc">年度会员</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥298</div>
            <div class="amount-desc">两年会员</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥398</div>
            <div class="amount-desc">三年会员</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥598</div>
            <div class="amount-desc">终身会员</div>
          </div>
        </div>
      </div>
      
      <div class="payment-methods">
        <div class="section-title">支付方式</div>
        <ul class="method-list">
          <li class="method-item selected">
            <div class="method-info">
              <div class="method-icon"><i class="fa fa-credit-card"></i></div>
              <div class="method-name">微信支付</div>
            </div>
            <div class="method-check"><i class="fa fa-check"></i></div>
          </li>
          <li class="method-item">
            <div class="method-info">
              <div class="method-icon"><i class="fa fa-paypal"></i></div>
              <div class="method-name">支付宝</div>
            </div>
            <div class="method-check"><i class="fa fa-check"></i></div>
          </li>
        </ul>
      </div>
      
      <div class="discount-section">
        <div class="section-title">优惠活动</div>
        <ul class="discount-list">
          <li class="discount-item">
            <div class="discount-info">
              <div class="discount-tag">首充</div>
              <div class="discount-desc">首次充值立减5元</div>
            </div>
            <div class="method-check"><i class="fa fa-check"></i></div>
          </li>
          <li class="discount-item">
            <div class="discount-info">
              <div class="discount-tag">邀请</div>
              <div class="discount-desc">邀请好友各得10元券</div>
            </div>
            <div class="method-check"><i class="fa fa-angle-right"></i></div>
          </li>
        </ul>
      </div>
      
      <div class="recharge-btn">
        <div class="total-amount">
          <div class="total-label">优惠后</div>
          <div class="total-value">¥43.00</div>
        </div>
        <button class="confirm-btn">确认开通</button>
      </div>
    </div>
    
    <!-- 风格4：商务蓝 - 简约商务 -->
    <div class="recharge-page" id="page4">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">账户充值</h1>
      </div>
      
      <div class="balance-info">
        <div class="balance-label">账户余额</div>
        <div class="balance-amount">¥256.80</div>
        <div class="balance-desc">企业用户充值可开发票</div>
      </div>
      
      <div class="amount-section">
        <div class="section-title">充值金额</div>
        <div class="amount-grid">
          <div class="amount-item">
            <div class="amount-value">¥100</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥200</div>
          </div>
          <div class="amount-item selected">
            <div class="amount-value">¥500</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥1000</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥2000</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥5000</div>
          </div>
        </div>
        
        <input type="text" class="custom-amount" placeholder="自定义金额">
      </div>
      
      <div class="payment-methods">
        <div class="section-title">支付方式</div>
        <ul class="method-list">
          <li class="method-item">
            <div class="method-info">
              <div class="method-icon"><i class="fa fa-credit-card"></i></div>
              <div class="method-name">微信支付</div>
            </div>
            <div class="method-check"><i class="fa fa-check"></i></div>
          </li>
          <li class="method-item selected">
            <div class="method-info">
              <div class="method-icon"><i class="fa fa-university"></i></div>
              <div class="method-name">企业对公转账</div>
            </div>
            <div class="method-check"><i class="fa fa-check"></i></div>
          </li>
          <li class="method-item">
            <div class="method-info">
              <div class="method-icon"><i class="fa fa-credit-card-alt"></i></div>
              <div class="method-name">银联在线支付</div>
            </div>
            <div class="method-check"><i class="fa fa-check"></i></div>
          </li>
        </ul>
      </div>
      
      <div class="discount-section">
        <div class="section-title">企业优惠</div>
        <ul class="discount-list">
          <li class="discount-item">
            <div class="discount-info">
              <div class="discount-tag">企业专享</div>
              <div class="discount-desc">充值满10000元享95折</div>
            </div>
          </li>
        </ul>
      </div>
      
      <div class="recharge-btn">
        <div class="total-amount">
          <div class="total-label">合计</div>
          <div class="total-value">¥500.00</div>
        </div>
        <button class="confirm-btn">确认充值</button>
      </div>
    </div>
    
    <!-- 风格5：活力橙 - 突出优惠 -->
    <div class="recharge-page" id="page5">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">充值中心</h1>
      </div>
      
      <div class="balance-info">
        <div class="balance-label">我的余额</div>
        <div class="balance-amount">¥8.20</div>
        <div class="balance-desc">限时活动：充多少送多少</div>
      </div>
      
      <div class="amount-section">
        <div class="section-title">选择金额</div>
        <div class="amount-grid">
          <div class="amount-item">
            <div class="amount-value">¥10</div>
            <div class="amount-desc">到账¥20</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥30</div>
            <div class="amount-desc">到账¥60</div>
          </div>
          <div class="amount-item selected hot">
            <div class="amount-value">¥50</div>
            <div class="amount-desc">到账¥100</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥100</div>
            <div class="amount-desc">到账¥200</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥200</div>
            <div class="amount-desc">到账¥400</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥500</div>
            <div class="amount-desc">到账¥1000</div>
          </div>
        </div>
        
        <input type="text" class="custom-amount" placeholder="其他金额">
      </div>
      
      <div class="payment-methods">
        <div class="section-title">支付方式</div>
        <ul class="method-list">
          <li class="method-item selected">
            <div class="method-info">
              <div class="method-icon"><i class="fa fa-credit-card"></i></div>
              <div class="method-name">微信支付</div>
            </div>
            <div class="method-check"><i class="fa fa-check"></i></div>
          </li>
          <li class="method-item">
            <div class="method-info">
              <div class="method-icon"><i class="fa fa-paypal"></i></div>
              <div class="method-name">支付宝</div>
            </div>
            <div class="method-check"><i class="fa fa-check"></i></div>
          </li>
        </ul>
      </div>
      
      <div class="discount-section">
        <div class="section-title">优惠券</div>
        <ul class="discount-list">
          <li class="discount-item">
            <div class="discount-info">
              <div class="discount-tag">满减券</div>
              <div class="discount-desc">满50减5元，限今日使用</div>
            </div>
            <div class="method-check"><i class="fa fa-check"></i></div>
          </li>
          <li class="discount-item">
            <div class="discount-info">
              <div class="discount-tag">新用户</div>
              <div class="discount-desc">首充额外送10元</div>
            </div>
            <div class="method-check"><i class="fa fa-check"></i></div>
          </li>
        </ul>
      </div>
      
      <div class="recharge-btn">
        <div class="total-amount">
          <div class="total-label">实付金额</div>
          <div class="total-value">¥45.00</div>
        </div>
        <button class="confirm-btn">立即充值</button>
      </div>
    </div>
    
    <!-- 风格6：科技蓝 - 未来感 -->
    <div class="recharge-page" id="page6">
      <div class="page-header">
        <button class="header-back"><i class="fa fa-arrow-left"></i></button>
        <h1 class="page-title">账户充值</h1>
      </div>
      
      <div class="balance-info">
        <div class="balance-label">账户余额</div>
        <div class="balance-amount">¥96.00</div>
        <div class="balance-desc">充值后可购买虚拟商品</div>
      </div>
      
      <div class="amount-section">
        <div class="section-title">充值金额</div>
        <div class="amount-grid">
          <div class="amount-item">
            <div class="amount-value">¥10</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥20</div>
          </div>
          <div class="amount-item selected">
            <div class="amount-value">¥30</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥50</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥100</div>
          </div>
          <div class="amount-item">
            <div class="amount-value">¥200</div>
          </div>
        </div>
        
        <input type="text" class="custom-amount" placeholder="输入金额">
      </div>
      
      <div class="payment-methods">
        <div class="section-title">支付方式</div>
        <ul class="method-list">
          <li class="method-item selected">
            <div class="method-info">
              <div class="method-icon"><i class="fa fa-credit-card"></i></div>
              <div class="method-name">微信支付</div>
            </div>
            <div class="method-check"><i class="fa fa-check"></i></div>
          </li>
          <li class="method-item">
            <div class="method-info">
              <div class="method-icon"><i class="fa fa-paypal"></i></div>
              <div class="method-name">支付宝</div>
            </div>
            <div class="method-check"><i class="fa fa-check"></i></div>
          </li>
          <li class="method-item">
            <div class="method-info">
              <div class="method-icon"><i class="fa fa-bitcoin"></i></div>
              <div class="method-name">数字货币</div>
            </div>
            <div class="method-check"><i class="fa fa-check"></i></div>
          </li>
        </ul>
      </div>
      
      <div class="discount-section">
        <div class="section-title">优惠信息</div>
        <ul class="discount-list">
          <li class="discount-item">
            <div class="discount-info">
              <div class="discount-tag">会员</div>
              <div class="discount-desc">VIP会员充值享8.8折</div>
            </div>
            <div class="method-check"><i class="fa fa-angle-right"></i></div>
          </li>
        </ul>
      </div>
      
      <div class="recharge-btn">
        <div class="total-amount">
          <div class="total-label">支付金额</div>
          <div class="total-value">¥30.00</div>
        </div>
        <button class="confirm-btn">确认支付</button>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentStyle = 1;
    
    // DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const rechargePages = {
      1: document.getElementById('page1'),
      2: document.getElementById('page2'),
      3: document.getElementById('page3'),
      4: document.getElementById('page4'),
      5: document.getElementById('page5'),
      6: document.getElementById('page6')
    };
    const bodyElement = document.body;
    
    // 初始化
    function init() {
      // 切换样式
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const style = parseInt(this.getAttribute('data-style'));
          switchStyle(style);
        });
      });
      
      // 初始化金额选择
      initAmountSelection();
      
      // 初始化支付方式选择
      initPaymentSelection();
    }
    
    // 初始化金额选择功能
    function initAmountSelection() {
      document.querySelectorAll('.amount-item').forEach(item => {
        item.addEventListener('click', function() {
          // 找到同一页面中的所有金额项
          const page = this.closest('.recharge-page');
          page.querySelectorAll('.amount-item').forEach(amountItem => {
            amountItem.classList.remove('selected');
          });
          
          // 选中当前点击的金额项
          this.classList.add('selected');
        });
      });
    }
    
    // 初始化支付方式选择功能
    function initPaymentSelection() {
      document.querySelectorAll('.method-item').forEach(item => {
        item.addEventListener('click', function() {
          // 找到同一页面中的所有支付方式
          const page = this.closest('.recharge-page');
          page.querySelectorAll('.method-item').forEach(methodItem => {
            methodItem.classList.remove('selected');
          });
          
          // 选中当前点击的支付方式
          this.classList.add('selected');
        });
      });
    }
    
    // 关闭所有页面
    function closeAllPages() {
      Object.values(rechargePages).forEach(page => {
        page.classList.remove('active');
      });
    }
    
    // 切换样式
    function switchStyle(style) {
      // 移除所有样式类
      bodyElement.classList.remove('style-1', 'style-2', 'style-3', 'style-4', 'style-5', 'style-6');
      
      // 添加当前样式类
      bodyElement.classList.add(`style-${style}`);
      
      // 更新当前样式
      currentStyle = style;
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (parseInt(option.getAttribute('data-style')) === style) {
          option.classList.add('active');
        }
      });
      
      // 显示对应页面
      closeAllPages();
      rechargePages[style].classList.add('active');
    }
    
    // 键盘导航
    document.addEventListener('keydown', function(e) {
      if (e.key === 'ArrowLeft') {
        let prev = currentStyle - 1;
        if (prev < 1) prev = 6;
        switchStyle(prev);
      } else if (e.key === 'ArrowRight') {
        let next = currentStyle + 1;
        if (next > 6) next = 1;
        switchStyle(next);
      }
    });
    
    // 启动
    init();
  </script>
</body>
</html>
